<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>智慧工地</title>
		<link rel="stylesheet" href="../../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/icons-extra.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/master.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/news-list.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/refresh.css" />
		<!--上拉刷新 下拉加载样式-->
		<link rel="stylesheet" type="text/css" href="../../../css/mui.picker.min.css" />
		<style>
		#topPopover {
			position: fixed;
			top: 16px;
			right: 6px;
		}
		
		#topPopover .mui-popover-arrow {
			left: auto;
			right: 6px;
		}
		
		.mui-popover {
			box-sizing: border-box;
			height: auto;
			overflow: hidden;
			padding-bottom:-10px;
			line-height: 10px;
			top:30%!important;
			width: 100%;
			margin-left: 5px;
		}
		
		.mui-popover .mui-popover-arrow {
			top:-30px;
		}
	</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav mui-head bg-00BC8D">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title text-ffffff">用户管理</h1>
			<a href="#topPopover" class="mui-icon mui-icon-plusempty mui-pull-right" style="color: #FFFFFF;margin-top:-3px;font-weight: 700;font-size: 30px;"></a>
		</header>
		<div class="mui-content" id="app">
			<ul class="mui-table-view group_list">
				<li class="mui-table-view-cell mui-media">
					<a class="zxxq" href="javascript:;">
						<div class="mui-media-body">
							<div class="mui-row">
								<div class="mui-col-xs-8 mui-col-sm-8 textCon" style="margin-left: 20px;">
									<input v-model="username" type="text" placeholder="输入姓名搜索..." style="padding: 5px;height: 30px;margin-bottom: 0px;margin-top: 5px;">
								</div>
								<button type="button" @click="search" class="mui-btn bg-00BC8D text-ffffff" style="height: 30px;margin-left: 10px;margin-top: 5px;border:1px solid #00BC8D;line-height: 10px;">查找</button>
							</div>
						</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media" v-for="item in items">
					<a class="zxxq" href="javascript:;">
						<div class="mui-media-body">
							<div class="mui-row" style="margin: 10px 0;">
								<p class="mui-pull-left" style="margin: 0 20px;height: 30px;line-height: 30px;font-size: 16px;color: #555555;">用户名:{{item.username}}</p>
								<button @click="userDelete(item.id)" type="button" class="mui-btn bg-00BC8D text-ffffff" style="height: 30px;float:right;margin-right:20px;border:1px solid #00BC8D;line-height: 10px;">删除</button>
								<button @click="userUpdata(item.id)" type="button" class="mui-btn bg-00BC8D text-ffffff" style="height: 30px;float:right;margin-right: 10px;border:1px solid #00BC8D;line-height: 10px;">编辑</button>
							</div>
						</div>
					</a>
				</li>
			</ul>
		</div>
		<!-- 模态框 新增 -->
		<div id="topPopover" class="mui-popover">
			<div class="mui-popover-arrow"></div>
			<div class="mui-table-view-cell mui-media" style="text-align: center;">
					<a class="zxxq" href="javascript:;">
						<div class="mui-media-body">
							<div class="mui-row" style="margin-top: 15px;">
								<p style="height: 30px;line-height: 30px;font-size: 16px;width:70px;text-align:right;color: #555555;display: inline-block;">用户名:</p>
								<div style="display: inline-block; width: 170px;">
									<input type="text" id="name1" placeholder="请输入用户名..." style="padding: 5px;height: 30px;">
								</div>
							</div>
							<div class="mui-row">
								<p style="height: 30px;line-height: 30px;font-size: 16px;width:70px;text-align:right;color: #555555;display: inline-block;">密码:</p>
								<div style="display: inline-block; width: 170px;">
									<input type="text" id="password1" placeholder="请输入密码..." style="padding: 5px;height: 30px;">
								</div>
							</div>
							<div class="mui-row">
								<p style="height: 30px;line-height: 30px;font-size: 16px;width:70px;text-align:right;color: #555555;display: inline-block;">确认密码:</p>
								<div style="display: inline-block; width: 170px;">
									<input type="text" id="passwords1" placeholder="请确认密码..." style="padding: 5px;height: 30px;">
								</div>
							</div>
							<div class="mui-row">
								<button type="button" onclick="userAdd()" class="mui-btn bg-00BC8D text-ffffff" style="height: 30px;border:1px solid #00BC8D;line-height: 10px;">确认</button>
							</div>
						</div>
					</a>
				</div>
		</div>
	</body>
	<script src="../../../js/jquery.min.js"></script>
	<script src="../../../js/mui.min.js"></script>
	<script src="../../../libs/waitMe/waitMe.min.js"></script>
	<script src="../../../js/setting.js"></script>
	<script src="../../../js/common.js"></script>
	<script src="../../../js/vue.min.js"></script>
	<script src="userControl.js"></script>
</html>
